<template>
  <div class="container entering">
    <div class="step" v-if="step<=0">
      <!-- <div class="step"> -->
      <div class="entering-banner">
        <img src="../../../static/images/dz-rz.png" alt="" mode="widthFix">
      </div>
      <i-panel>
        <i-input :value="user_name" title="姓名" @change="change($event,'user_name')" placeholder="请输入姓名" />
        <!-- <i-input :value="phone" title="身份证号" @change="change($event,'phone')" placeholder="请输入身份证号" /> -->
        <div class="i-cell i-input cell">
          <div class="i-cell-hd i-input-title">身份证</div>
          <div class="i-cell-bd">
            <div class="weui-uploader__files" id="uploaderFiles" v-if="identity_cert_just">
              <block>
                <div class="weui-uploader__file posi-rela" @click="predivImage" :id="identity_cert_just">
                  <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('identity_cert_just')" />
                  <image class="weui-uploader__img" :src="identity_cert_just" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box" v-if="!identity_cert_just">
              <div class="weui-uploader__input" @click="chooseImage($event,'identity_cert_just')"></div>
            </div>
          </div>
          <div class="i-cell-bd">
            <div class="weui-uploader__files" id="uploaderFiles" v-if="identity_cert_back">
              <block>
                <div class="weui-uploader__file posi-rela" @click="predivImage" :id="identity_cert_back">
                  <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('identity_cert_back')" />
                  <image class="weui-uploader__img" :src="identity_cert_back" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box" v-if="!identity_cert_back">
              <div class="weui-uploader__input" @click="chooseImage($event,'identity_cert_back')"></div>
            </div>
          </div>
        </div>
        <i-input :value="phone" title="手机号" @change="change($event,'phone')" placeholder="请输入手机号" />
        <div class="i-cell i-input cell">
          <div class="i-cell-hd i-input-title">验证码</div>
          <div class="i-cell-bd">
            <input type="text" class="i-input-input i-cell-bd" placeholder="请输入收到的验证码" v-model="code">
          </div>
          <div class="i-cell-ft">
            <button type="button" class="sendCode" @click="sendCode">{{sendCodeProgress}}</button>
          </div>
        </div>
      </i-panel>
      <button type="button" class="sub-btn" @click="nextStep">下一步</button>
    </div>
    <div class="step" v-if="step>0">
      <!-- <div class="step"> -->
      <div class="entering-banner">
        <img src="../../../static/images/dp-rz.png" alt="" mode="widthFix">
      </div>
      <i-panel>
        <div class="i-cell i-input cell">
          <div class="i-cell-hd i-input-title">店招图片</div>
          <div class="i-cell-bd">
            <div class="weui-uploader__files" id="uploaderFiles" v-if="store_banner">
              <block>
                <div class="weui-uploader__file posi-rela" @click="predivImage" :id="store_banner">
                  <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('store_banner')" />
                  <image class="weui-uploader__img" :src="store_banner" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box" v-if="!store_banner">
              <div class="weui-uploader__input" @click="chooseImage($event,'store_banner')"></div>
            </div>
          </div>
        </div>
        <i-input :value="store_name" title="店铺名称" @change="change($event,'store_name')" placeholder="请输入店铺名称" />
        <i-cell is-link i-class="select-city-cell">
          <picker mode="multiSelector" @change="addressPicker" @columnchange="addressColumnPicker" :value="index"
            range-key="name" :range="array" class="select-city">
            <i-input :value="city_info" title="店铺地址" disabled="disabled" placeholder="收货人所在地址" i-class="" />
          </picker>
        </i-cell>
        <i-input :value="store_address" type="textarea" title=" " @change="change($event,'store_address')" i-class="no-border"
          placeholder="详细地址楼栋号 门牌号" />
        <div class="i-cell i-input cell">
          <div class="i-cell-hd i-input-title">服务支持</div>
          <div class="i-cell-bd">
            <div class="tagsList">
              <div class="tag" v-for="(item,index) in tags" :key="index" :class="{'active':store_label[item]}" @click="handlerSelectTag(item)">{{item}}</div>
            </div>
          </div>
        </div>
        <!-- <i-input :value="store_label" title="服务支持" @change="change($event,'store_label')" placeholder="请输入服务支持" /> -->
        <i-input :value="store_workingtime" title="营业时间" @change="change($event,'store_workingtime')" placeholder="请输入营业时间" />
        <i-input type="textarea" :value="store_description" title="门店介绍" @change="change($event,'store_description')"
          placeholder="请输入门店介绍" />
      </i-panel>
      <i-panel>
        <div class="i-cell i-input cell">
          <div class="i-cell-hd i-input-title">店铺logo</div>
          <div class="i-cell-bd">
            <div class="weui-uploader__files" id="uploaderFiles" v-if="store_logo">
              <block>
                <div class="weui-uploader__file posi-rela" @click="predivImage" :id="store_logo">
                  <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('store_logo')" />
                  <image class="weui-uploader__img" :src="store_logo" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box" v-if="!store_logo">
              <div class="weui-uploader__input" @click="chooseImage($event,'store_logo')"></div>
            </div>
          </div>
        </div>
        <div class="i-cell i-input cell">
          <div class="i-cell-hd i-input-title">营业执照</div>
          <div class="i-cell-bd">
            <div class="weui-uploader__files" id="uploaderFiles" v-if="business_licence_cert">
              <block>
                <div class="weui-uploader__file posi-rela" @click="predivImage" :id="business_licence_cert">
                  <icon type="cancel" size="20" class="th-icon-cancel" @click.stop="deletImg('business_licence_cert')" />
                  <image class="weui-uploader__img" :src="business_licence_cert" mode="aspectFill" />
                </div>
              </block>
            </div>
            <div class="weui-uploader__input-box" v-if="!business_licence_cert">
              <div class="weui-uploader__input" @click="chooseImage($event,'business_licence_cert')"></div>
            </div>
          </div>
        </div>

        <i-cell is-link i-class="select-city-cell">
          <picker mode="multiSelector" @change="scPicker" @columnchange="scColumnPicker" :value="classIndex" range-key="name"
            :range="classArray" class="select-city">
            <i-input :value="sc_text" title="选择分类" disabled="disabled" placeholder="请选择分类" i-class="" />
          </picker>
        </i-cell>
      </i-panel>
      <button type="button" class="sub-btn" @click="serviceApplyStore">提交</button>
    </div>

    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import areas from "@/utils/area";
  import {
    path
  } from "@/utils/index";
  import request from "@/api/request";
  export default {
    components: {},

    data() {
      return {
        step: 0,
        tags: [],
        sendCodeProgress: "发送验证码",
        sendCodeStatus: false,
        isEdit: false,
        index: [0, 0, 0],
        classIndex: [0],
        array: null,
        classArray: null,
        id: null,
        user_name: null, // 	String	// 姓名,
        identity_cert_just: null, // 	String	// 身份证正面照,
        identity_cert_back: null, // 	String	// 身份证反面照// ,
        phone: null, // 	String	// 手机号,
        store_banner: null, // _banner	String	// 店招图片,
        store_name: null, // 	String	// 店铺名称,
        city_info: null, // 	String	// 城市信息,
        store_address: null, // 	String	// 详细地址,
        store_label: {}, // 	String	// 店铺标签,
        store_workingtime: null, // 	String	// 工作时间,
        store_description: null, // 	String	// 店铺介绍,
        store_logo: null, // 	String	// 店铺logo,
        business_licence_cert: null, // 	String	// 营业执照,
        sc_id: null, // 	Int	// 店铺分类id,
        sc_text: null, // 	Int	// 店铺分类id,
        code: null,
      };
    },
    computed: {
      ...mapState(['addressList', 'changeAddress'])
    },
    methods: {
      getStoreClass(value) {

      },
      handlerSelectTag(value) {
        if (this.store_label[value]) {
          this.$set(this.store_label, value, null)
          delete this.store_label[value]
        } else {
          this.$set(this.store_label, value, value)
        }
      },
      change(e, key) {
        this[key] = e.mp.detail.detail.value
        console.log(e.mp.detail.detail.value)
      },
      addressPicker(e) {
        this.city_info =
          `${this.array[0][e.mp.detail.value[0]].name}${this.array[1][e.mp.detail.value[1]].name}${this.array[2][e.mp.detail.value[2]].name}`
      },
      addressColumnPicker(e) {
        this.$set(this.index, e.mp.detail.column, e.mp.detail.value)
        this.getArray(e.mp.detail)
      },
      scPicker(e) {
        this.sc_id = `${this.classArray[0][e.mp.detail.value[0]].id}`
        this.sc_text = `${this.classArray[0][e.mp.detail.value[0]].name}`
      },
      scColumnPicker(e) {
        this.$set(this.classIndex, e.mp.detail.column, e.mp.detail.value)
        console.log(this.classArray)
        // this.getArray(e.mp.detail)
      },
      chooseImage(e, target) {
        let _this = this
        wx.chooseImage({
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success(res) {
            console.log(res)
            console.log(res.tempFilePaths)
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            console.log(_this[target], target)
            _this[target] = res.tempFilePaths[0];
            wx.uploadFile({ //上传到服务器
              url: `${path}common/upload-photo`, //仅为示例，非真实的接口地址
              filePath: res.tempFilePaths[0], //文件地址
              name: 'file', //文件name值
              success: function (uploadFile) {
                console.log(JSON.parse(uploadFile.data))
                _this[target] = JSON.parse(uploadFile.data).data.url;
              },
              fail(e) {
                console.log(e);
              },
            })
          },
          fail() {
            console.log("fail");
          },
          complete() {
            console.log("commplete");
          }
        });
      },
      predivImage(e) {
        console.log(e);
        wx.previewImage({
          current: e.currentTarget.id, // 当前显示图片的http链接
          urls: this.screen_pic // 需要预览的图片http链接列表
        });
      },
      deletImg(target) {
        this[target] = '';
      },
      postAddress() {

        // if (!this.store_address) {
        //   $Toast({
        //     content: '请输入详细地址',
        //     type: 'error'
        //   });
        //   return
        // }
        let data = {
          username: this.username,
          phone: this.phone,
          city_info: this.city_info,
          store_address: this.address
        }
        if (this.id) {
          data['address_id'] = this.id
        }
        request
          .postAddress(data)
          .then(res => {
            console.log(res)
            $Toast({
              content: res.message,
              type: res.code == 0 ? 'success' : 'warning'
            });
          }).catch((res) => {
            $Toast({
              content: res.message,
              type: res.code == 0 ? 'success' : 'error'
            });
          });
      },

      getArray(option) {
        console.log(option)
        let province = []
        let city = []
        let area = []
        if (!option) {
          this.array = [
            [],
            [],
            []
          ]
          for (let i = 0; i < areas.length; i++) {
            if (areas[i].level == 1) {
              province.push(areas[i])
            }
          }
          this.$set(this.array, 0, province)
          for (let i = 0; i < areas.length; i++) {
            if (areas[i].level == 2) {
              if (areas[i].sheng == this.array[0][0].sheng) {
                city.push(areas[i])
              }
            }
          }
          this.$set(this.array, 1, city)
          for (let i = 0; i < areas.length; i++) {
            if (areas[i].level == 3) {
              if (areas[i].sheng == this.array[1][0].sheng && areas[i].di == this.array[1][0].di) {
                area.push(areas[i])
              }
            }
          }
          this.$set(this.array, 2, area)
        }
        // column value

        if (option) {
          if (option.column == 0) {
            for (let i = 0; i < areas.length; i++) {
              if (areas[i].level == 2) {
                if (areas[i].sheng == this.array[option.column][option.value].sheng) {
                  city.push(areas[i])
                }
              }
            }
            this.$set(this.array, 1, city)
            for (let i = 0; i < areas.length; i++) {
              if (areas[i].level == 3) {
                if (areas[i].sheng == this.array[option.column + 1][0].sheng && areas[i].di == this.array[option.column +
                    1][0].di) {
                  area.push(areas[i])
                }
              }
            }
            this.$set(this.array, 2, area)
          }
          if (option.column == 1) {
            for (let i = 0; i < areas.length; i++) {
              if (areas[i].level == 3) {
                if (areas[i].sheng == this.array[option.column][option.value].sheng && areas[i].di == this.array[option
                    .column][option.value].di) {
                  area.push(areas[i])
                }
              }
            }
            this.$set(this.array, 2, area)
          }
        }
      },
      isPoneAvailable($poneInput) {
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test($poneInput)) {
          return false;
        } else {
          return true;
        }
      },

      sendCode() {
        if (this.sendCodeStatus) {
          return
        }
        if (!this.isPoneAvailable(this.phone)) {
          $Toast({
            content: '请输入正确的手机号',
            type: 'error'
          });
          return
        }
        console.log('发送')
        request.sendCode({
          phone: this.phone
        }).then(res => {
          console.log(res)
          $Toast({
            content: res.message,
            type: res.code == 0 ? "success" : "warning"
          });
          this.sendCodeStatus = true
          let progress = 60
          this.sendCodeProgress = `${progress}s后重新发送`
          setInterval(() => {
            progress--
            this.sendCodeProgress = `${progress}s后重新发送`
            if (progress <= 0) {
              this.sendCodeProgress = "发送验证码"
              this.sendCodeStatus = false
            }
          }, 1000)
        }).catch(error => {
          $Toast({
            content: error.message,
            type: error.code == 0 ? "success" : "warning"
          });
        })
      },
      serviceApplyStore() {
        console.log(this)
        if (!this.user_name) {
          $Toast({
            content: '请输入姓名',
            type: 'error'
          });
          return
        }
        if (!this.identity_cert_just) {
          $Toast({
            content: '请选择身份证正面照',
            type: 'error'
          });
          return
        }
        if (!this.identity_cert_back) {
          $Toast({
            content: '请选择身份证反面照',
            type: 'error'
          });
          return
        }
        if (!this.phone) {
          $Toast({
            content: '请输入手机号',
            type: 'error'
          });
          return
        }
        if (!this.store_banner) {
          $Toast({
            content: '请选择店招图片',
            type: 'error'
          });
          return
        }
        if (!this.store_name) {
          $Toast({
            content: '请输入店铺名称',
            type: 'error'
          });
          return
        }
        if (!this.city_info) {
          $Toast({
            content: '请选择城市',
            type: 'error'
          });
          return
        }
        if (!this.store_address) {
          $Toast({
            content: '请输入详细地址',
            type: 'error'
          });
          return
        }
        // if (!this.store_label) {
        //   $Toast({
        //     content: '请输入验证码',
        //     type: 'error'
        //   });
        //   return
        // }
        if (!this.store_workingtime) {
          $Toast({
            content: '请输入工作时间',
            type: 'error'
          });
          return
        }
        // if (!this.store_description) {
        //   $Toast({
        //     content: '请输入验证码',
        //     type: 'error'
        //   });
        //   return
        // }
        if (!this.store_logo) {
          $Toast({
            content: '请选择店铺logo',
            type: 'error'
          });
          return
        }
        if (!this.business_licence_cert) {
          $Toast({
            content: '请选择营业执照',
            type: 'error'
          });
          return
        }
        if (!this.sc_id) {
          $Toast({
            content: '请选择店铺分类',
            type: 'error'
          });
          return
        }
        if (!this.isPoneAvailable(this.phone)) {
          $Toast({
            content: '请输入正确的手机号',
            type: 'error'
          });
          return
        }
        if (!this.code) {
          $Toast({
            content: '请输入验证码',
            type: 'error'
          });
          return
        }
        request.serviceApplyStore({
          user_name: this.user_name,
          identity_cert_just: this.identity_cert_just,
          identity_cert_back: this.identity_cert_back,
          phone: this.phone,
          store_banner: this.store_banner,
          store_name: this.store_name,
          city_info: this.city_info,
          store_address: this.store_address,
          store_label: Object.keys(this.store_label).join(','),
          store_workingtime: this.store_workingtime,
          store_description: this.store_description,
          store_logo: this.store_logo,
          business_licence_cert: this.business_licence_cert,
          sc_id: this.sc_id,
        }).then(res => {
          $Toast({
            content: res.message,
            type: res.code == 0 ? "success" : "warning"
          });
          console.log(res)
          setTimeout(() => {
            this.$router.push({
              path: '/pages/index/index'
            })
          }, 1300)
        }).catch(error => {
          $Toast({
            content: error.message,
            type: error.code == 0 ? "success" : "warning"
          });
        })
      },
      nextStep() {
        if (!this.user_name) {
          $Toast({
            content: '请输入姓名',
            type: 'error'
          });
          return
        }
        if (!this.identity_cert_just) {
          $Toast({
            content: '请选择身份证正面照',
            type: 'error'
          });
          return
        }
        if (!this.identity_cert_back) {
          $Toast({
            content: '请选择身份证反面照',
            type: 'error'
          });
          return
        }
        if (!this.phone) {
          $Toast({
            content: '请输入手机号',
            type: 'error'
          });
          return
        }
        if (!this.code) {
          $Toast({
            content: '请输入验证码',
            type: 'error'
          });
          return
        }
        request.verifyCode({
          phone: this.phone,
          code: this.code
        }).then(res => {
          $Toast({
            content: res.message,
            type: res.code == 0 ? "success" : "warning"
          });
          this.step = 1
        }).catch(error => {
          $Toast({
            content: error.message,
            type: error.code == 0 ? "success" : "warning"
          });
        })
      },
      getServiceSysTags() {
        request.getServiceSysTags().then(res => {
          console.log(res.data.tags)
          this.tags = res.data.tags
        })
      }
    },
    mounted() {
      this.getArray()
      this.getServiceSysTags()
      // setTimeout(() => {
      //   this.$router.push({
      //     path: '/pages/index/index'
      //   })
      // }, 1300)
      request.serviceStoreCates().then(res => {
        this.classArray = [res.data]
        console.log(this.classArray)
      })
    }
  };

</script>

<style lang="less">
  .i-swipeout-item {
    margin-top: 10px;
    border-bottom: 0 !important;
  }

  .i-swipeout-button {
    height: 58px;
    width: 64px;
    text-align: center;
    line-height: 58px;
    color: #fff;
  }

  .i-swipeout-button-group {
    background: #ee7559;
    width: 64px;
    height: 58px;
  }

  .address {
    padding-bottom: 49px;

  }

  .address-controller {
    margin-top: 30px;
  }

  .address-edit {
    width: 38px;
    height: 38px;
  }

  .add-address {
    height: 49px;
    background: #fff;
    line-height: 49px;
    font-size: 15px;
    color: rgba(238, 117, 89, 1);
    text-align: center;
    margin-top: 14px;

  }

  .address {
    .select-city-cell {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .select-city {
    margin: 0 -15px;
  }

  .no-border {
    border: 0;

    &:after {
      display: none;
    }
  }

  .cell {
    width: 100%;
    display: flex;
    background: #fff;
  }

  .i-cell {
    position: relative;
    padding: 12px 15px;
    display: flex;
    background: #fff;
    line-height: 1.4;
    font-size: 14px;
    overflow: hidden;
  }

  .i-cell::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 0 solid #e9eaec;
    border-bottom-width: 1rpx;
    left: 0;
    right: 0
  }

  .i-cell::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 0 solid red;
    border-bottom-width: 1px;
    left: 0;
    right: 0
  }

  .i-cell-last::after {
    display: none
  }

  .i-cell-icon {
    margin-right: 5px
  }

  .i-cell-icon:empty {
    display: none
  }

  .i-cell-bd {
    flex: 1;
    flex: 1;
    line-height: 1.6;
    min-height: 22PX;
    height: auto;
    font-size: 14px;


  }

  .i-cell-text {
    line-height: 24px;
    font-size: 14px
  }

  .i-cell-desc {
    line-height: 1.2;
    font-size: 12px;
    color: #80848f
  }

  .i-cell-ft {
    position: relative;
    text-align: right;
    color: #495060
  }

  .i-cell-access .i-cell-ft {
    padding-right: 13px
  }

  .i-cell-access .i-cell-ft::after {
    content: " ";
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 2px;
    border-width: 2px 2px 0 0;
    border-color: #dddee1;
    border-style: solid;
    transform: translateY(-50%) matrix(.71, .71, -.71, .71, 0, 0)
  }

  .i-input {
    padding: 7px 15px;
    color: #495060
  }

  .i-input-wrapped {
    margin: 10px 15px;
    background-color: #fff
  }

  .i-input-wrapped::after {
    left: 0;
    border-width: 1px;
    border-radius: 4px
  }

  .i-input-error {
    color: #ed3f14
  }

  .i-input-title {
    color: #495060;
    min-width: 70PX;
    padding: 4PX 0;
    padding-right: 10PX;
    box-sizing: content-box
  }

  .i-input-input {
    flex: 1;
    line-height: 1.6;
    padding: 4px 0;
    min-height: 22px;
    height: auto;
    font-size: 14px
  }

  .i-input-placeholder {
    font-size: 14px
  }

  .i-input-input-right {
    text-align: right
  }

  .i-input.i-input-wrapped::after {
    display: block
  }

  .i-input-wrapped.i-input-error::after {
    border-color: #ed3f14
  }

  .select-city-cell {}

  .th-icon-cancel {
    position: absolute;
    background-color: #fff;
    border-radius: 50%;
    right: -14rpx;
    top: -14rpx;
  }

  .weui-uploader__file {
    position: relative
  }

  .sendCode {
    height: 32px;
    background: #ee7559;
    color: #fff;
    border: 0;
    line-height: 32px;
    font-size: 14px;
    border-radius: 16px;
  }

  .sub-btn {
    border-radius: 22px;
    margin: 20px 15px;
    height: 44px;
    background: #ee7559;
    color: #fff;
    border: 0;
    line-height: 44px;
    font-size: 14px;
  }

  .entering-banner {

    img {
      display: block;
      width: 100%;
    }
  }

  .tagsList {
    display: flex;
    flex-wrap: wrap;

    .tag {
      margin-top: 2px;
      padding: 5px 8px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-right: 10px;
      margin-bottom: 3px;
      background: #fff;
      color: #333333;
      border-radius: 5px;
      border: 1px solid #DADADA;
      font-size: 12px;
      color: rgba(96, 96, 96, 1);
      line-height: 1em;

      &.active {
        border-color: #EE7559;
        color: #EE7559;
      }

    }
  }

</style>
